<template>
  <div>
    <div class="inline-container">
      <!-- 新增消息发布 -->
      <el-button type="primary" icon="el-icon-plus" @click="addMsgPublishBox">新增
      </el-button>
      <!-- 搜索框 -->
      <div class="centered-search">
        <el-form :inline="true" :model="sysMsgPublishQuery" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model="sysMsgPublishQuery.titile" placeholder="标题" clearable></el-input>
          </el-form-item>
          <el-form-item label="消息类型">
            <el-select v-model="sysMsgPublishQuery.msgType" clearable placeholder="请选择">
              <el-option v-for="item in msgType" :key="item.vlaue" :label="item.name" :value="item.vlaue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMsgPublishData()">查询</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 2、分隔线区域 -->
    <el-divider></el-divider>

    <!-- 3、表单 -->
    <el-table :data="msgPublishData" style="width: 100%" border>
      <el-table-column type="index" width="80" label="序号"></el-table-column>
      <el-table-column prop="fullName" label="创建人" width="150">
        <template slot-scope="scope">
          <!-- 使用插槽来处理空单元格情况 -->
          {{ scope.row.fullName || "-" }}
        </template>
      </el-table-column>
      <el-table-column prop="titile" label="标题" width="150">
      </el-table-column>
      <el-table-column prop="msgType" label="消息类型" width="250">
        <template slot-scope="scope">
          <!-- 使用插槽来处理空单元格情况 -->
          <span v-if="scope.row.msgType == 1">系统通知</span>
          <span v-else>用户咨询</span>
        </template>
      </el-table-column>
      <el-table-column prop="userType" label="通知终端" width="250">
        <template slot-scope="scope">
          <!-- 使用插槽来处理空单元格情况 -->
          <span v-if="scope.row.userType == 1">用户端信息</span>
          <span v-else>管理端消息</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-position" size="mini" @click="sendAgain(scope.row)" title="再次发送" />
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="updMsgPublishBox(scope.row)" title="修改" />
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)" title="删除" />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="sysMsgPublishQuery.current" :page-sizes="[10, 20, 50, 100]" :page-size="sysMsgPublishQuery.size"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <MsgPublishAddOrUpd :dialogInfo="dialogInfo" :formData="form" @addOrUpd-success="addOrUpdSuccess">
    </MsgPublishAddOrUpd>
  </div>
</template>

<script>
  import {
    getMsgPublishList,
    findById,
    del
  } from "@/services/msgPublish";
  import MsgPublishAddOrUpd from "@/views/home/msgPublishAddOrUpd.vue";
  export default {
    name: "MsgPublish",
    components: {
      MsgPublishAddOrUpd,
    },
    data() {
      return {
        dialogInfo: {
          dialogTitle: "消息发布",
          dialogVisible: false,
          sendDialogVisible: false,
        },
        msgType: [{
            name: "系统通知",
            vlaue: 1,
          },
          {
            name: "用户咨询",
            vlaue: 2,
          },
        ],
        total: 0,
        sysMsgPublishQuery: {
          current: 1,
          size: 10,
          msgType: null,
          titile: "",
        },
        form: {
          titile: "",
          content: "",
          userIds: [],
          userType: null,
          msgType: null,
        },
        msgPublishData: [],
      };
    },

    mounted() {
      this.getMsgPublishData();
    },

    methods: {
      //crud
      getMsgPublishData() {
        getMsgPublishList(this.sysMsgPublishQuery)
          .then((res) => {
            this.total = res.data.total;
            this.msgPublishData = res.data.records;
          })
          .catch((error) => {});
      },

      //删除角色
      del(id) {
        del(id)
          .then((res) => {
            if (res.code === 200) {
              this.getMsgPublishData();
              this.$message({
                type: "success",
                message: "删除成功",
              });
            }
          })
          .catch((error) => {});
      },
      //----------------弹框---------------------------

      addOrUpdSuccess() {
        this.getMsgPublishData();
      },
      sendAgain(row) {
        this.clearFrom();
        this.dialogInfo.sendDialogVisible = true;
        this.form.id = row.id;
      },
      updMsgPublishBox(info) {
        this.clearFrom();
        findById(info.id)
          .then((res) => {
            this.form.id = res.data.id;
            this.form.content = res.data.content;
            this.form.titile = res.data.titile;
            this.form.userType = res.data.userType;
            this.form.msgType = res.data.msgType;
          })
          .catch((error) => {});

        this.dialogInfo.dialogTitle = "编辑消息发布";
        this.dialogInfo.dialogVisible = true;
      },
      //消息发布弹框
      addMsgPublishBox() {
        this.clearFrom();
        this.dialogInfo.dialogVisible = true;
      },
      //重置
      resetForm() {
        this.sysMsgPublishQuery = {
          current: 1,
          size: 10,
          msgType: null,
          titile: "",
        };
        this.getMsgPublishData();
      },
      //分页处理
      handleSizeChange(val) {
        this.sysMsgPublishQuery.size = val;
        this.getMsgPublishData();
      },
      handleCurrentChange(val) {
        this.sysMsgPublishQuery.current = val;
        this.getMsgPublishData();
      },
      clearFrom() {
        this.form = {
          titile: "",
          content: "",
          userIds: [],
          userType: null,
          msgType: null,
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .inline-container {
    height: 40px;
    display: flex;
    align-items: center;

    /* Optional: Align items vertically center if needed */
    .centered-search {
      margin-left: 30%;
      justify-content: center;
      margin-top: 26px;
    }
  }

  .page {
    display: flex;
    justify-content: flex-end;
  }
</style>